<template>
    <div>
        
        <el-row type="flex" justify="start" class="flight-title">
            <el-col :span="4">订单号</el-col>
            <el-col :span="4">航空信息</el-col>
            <el-col :span="4">起飞时间</el-col>
            <el-col :span="4">起飞地点</el-col>
            <el-col :span="4">路程信息</el-col>
            <el-col :span="2">联系人</el-col>
            <el-col :span="1">
                <input type="button" value="刷新" @click="fn"/>
            </el-col>
            
        </el-row>
        <div>
            <showjipiao :data="item" v-for="(item,index) in renderData" :key="index"></showjipiao>
        </div>
        
        <el-row type="flex" justify="center">
                    <el-pagination 
                    layout="prev, pager, next" 
                    :total="orderDetail.length"
                    :page-size="pageSize"
                    @current-change="currentChange">
                    </el-pagination>
                </el-row>
    </div>
</template>


<script>

import showjipiao from '@/pages/showjipiao'
export default {
    components:{
        showjipiao,
    },
    data() {
        return {
            orderDetail: [],
            renderData: [],
            pageIndex: 1,
            pageSize: 10,
        }
    },
    mounted(){
        setTimeout(() => {
            for (let id = 1700; id >1500; id--) {
                this.$axios({
                    url: "airorders/" + String(id),
                    headers: {
                        Authorization: `Bearer ` + this.$store.state.user.userInfo.token
                    }
                }).then(res => {
                    //console.log('this.$store.state.user.userInfo.user.username',this.$store.state.user.userInfo.user.username)
                    //console.log('res.data.account.username',res.data.account.username)
                    if(res.data.account.username==this.$store.state.user.userInfo.user.username){
                        this.orderDetail.push(res.data)
                    }
                })
            }
        }, 0)
    },
    methods:{
        getRenderData() {
            let start = (this.pageIndex - 1) * this.pageSize
            let end = (this.pageIndex) * this.pageSize
            this.renderData = this.orderDetail.slice(start, end)
            console.log(start, end, this.renderData)
        },
        fn(){
            this.getRenderData()
        },
        currentChange(page){
            this.pageIndex=page
            this.getRenderData()
        }
    }
}
</script>

<style lang="less">
input{
    margin: 0 auto;
}
.flight-title{
        padding:0 15px;
        border:1px #ddd solid;
        background:#f6f6f6;
        height:38px;
        line-height: 38px;
        color:#666;
        font-size:12px;
        margin-bottom: 10px;

        >div{
            text-align: center
        }
    }
</style>